<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ví dụ về kết hợp JSON trong jQuery và PHP - ntuts.com</title>

<script src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script type="text/javascript" language="javaScript">
	$(document).ready(function() {
		// Gắn sự kiện onclick vào #viewbtn
		$('#viewbtn').click(function() {
			$('#loading').html('Loading...');
			var strURL = 'getMember.php';
			$.ajax({
				url : strURL,
				type : 'POST',
				cache : false,
				data : 'getMember=view',
				beforeSend : function() {
					// Text loading
					document.getElementById('loading').style.display = 'block';
					// Image loading screen
					$("body").addClass("loading");
				},
				success : function(data) {

					/**
					 * Kiểu mặc định trả về là dạng String, bạn dùng hàm parseJSON để phân tích dữ liệu trả về
					 * có 2 cách parse JSON là : JSON.parse() và $.parseJSON();
					 * 1. var getData = JSON.parse(string);
					 * 2. var getData = $.parseJSON(string);
					 **/
					var getData = $.parseJSON(data);
					//input dữ liệu lấy về từ server vào textbox
					$('#txt_username').val(getData.username);
					$('#txt_password').val(getData.password);
					$('#txt_email').val(getData.email);

					//Trả loading về trạng thái ban đầu
					$('#loading').html('&nbsp;');
					// Remove screen of image loading
					$("body").removeClass("loading");
				},
				error : function() {
					alert('Có lỗi xảy ra');
				}
			});
		});

		// Gắn sự kiện onclick vào #resetbtn
		$('#resetbtn').click(function() {
			$('input:text').val(''); // xóa hết dữ liệu trong textbox
		});
	});
</script>

<link type="text/css" rel="stylesheet" href="style.css" />

</head>
<body>
	<div style="height: 30px; padding: 0 10px 10px 0px">Ví dụ về kết
		hợp JSON trong jQuery và PHP</div>
	<!-- start: container -->
	<div class="container">
		<ul>
			<li>Username:</li>
			<li><input type="text" name="txt_username" id="txt_username"
				value="" size="32" /></li>
		</ul>
		<ul>
			<li>Password:</li>
			<li><input type="text" name="txt_password" id="txt_password"
				value="" size="32" /></li>
		</ul>
		<ul>
			<li>Email:</li>
			<li><input type="text" name="txt_email" id="txt_email" value=""
				size="32" /></li>
		</ul>
		<ul>
			<li id="loading">&nbsp;</li>
			<li><a href="javascript:void(0);" id="viewbtn"
				title="view member">Load dữ liệu demo</a></li>
			<li><a href="javascript:void(0);" id="resetbtn">Reset</a></li>
		</ul>
	</div>
	<!-- end: container -->
	<div class="modal"></div>
</body>
</html>